
$(function () {
    // 1.获取统计数据
    $.ajax({
        type: 'get',
        url: '/admin/data/info',
        success: function (backData) {
            // console.log(backData);
            let { dayArticle, dayComment, totalArticle, totalComment } = backData
            $('.scolor00 em').text(totalComment)
            $('.scolor01 em').text(totalArticle)
            $('.scolor02 em').text(dayComment)
            $('.scolor03 em').text(dayArticle)
        }
    })

    // 2.折线图数据显示
    $.ajax({
        type: 'get',
        url: '/admin/data/article',
        success: function (backData) {
            // console.log(backData);
            let dates = backData.date.map(function (item) {
                return item.date
            })
            let counts = backData.date.map(function (item) {
                return item.count
            })
            loadEchars(dates, counts)
        }
    })

    // 调用折线图表
    function loadEchars(dates, counts) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('curve_show'));

        // 用老办法拿到要显示的图表信息
        /* var data = [];
        var date = [];
        for (var i = 0; i < obj.date.length; i++) {
            data.push(obj.date[i].count);
            date.push(obj.date[i].date);
        } */

        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '日新增文章数',
            },

            xAxis: {
                name: '日',
                type: 'category',
                boundaryGap: false,
                data: dates
            },
            legend: {
                data: ['新增文章'],
                top: '40'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                },
                right: 50
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            series: [
                {
                    name: '新增文章',
                    type: 'line',
                    smooth: true,
                    // symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        color: '#f80'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(255,136,0,0.39)'
                        }, {
                            offset: .34,
                            color: 'rgba(255,180,0,0.25)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,222,0,0.00)'
                        }]),
                    },
                    data: counts
                }
            ],
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


    // 饼图文章数据显示
    $.ajax({
        type: 'get',
        url: '/admin/data/category',
        success: function (backData) {
            // console.log(backData);
            // 返回的是数组包对象，遍历数组，把里面对象的内容放进去
            let sservicedata = []

            backData.date.map(function (item) {
                let obj = {
                    value: item.articles,
                    name: item.name
                }
                sservicedata.push(obj)
            })
            loadBing(sservicedata)
        }
    })
    // 调用饼状图数据显示
    function loadBing(sservicedata) {
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('pie_show'));

        option1 = {
            title: {
                left: 'center',
                text: '分类文章数量比',
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                // data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
                top: 20
            },
            color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
            series: [
                {
                    name: '分类名称',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                // fontWeight: 'bold'
                            }
                        }
                    },
                    data: sservicedata
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
    }


    // 柱状图数据显示

    $.ajax({
        type: 'get',
        url: '/admin/data/visit',
        success: function (backData) {
            // console.log(backData);
            let data = backData.data
            let time = []
            let shuliang = []
            for (let key in data) {
                // console.log(key, data[key]);
                /* time = key
                shuliang = data[key] */
                time.push(key)
                shuliang.push(data[key])
                // console.log(time,shuliang);
            }
            console.log(time,shuliang);
            zhuZhuang(time,shuliang)
        }
    })

    zhuZhuang()
    // 柱状图数据
    function zhuZhuang(time,shuliang) {
        var myChart2 = echarts.init(document.getElementById('column_show'));
        options = {
            xAxis: {
                type: 'category',
                data: time
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                trigger: 'axis'
            },
            color: '#5885e8',
            series: [{
                data: shuliang,
                type: 'bar',
                barWidth: 80, // 设置柱子的宽度
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };

        /* option2 = {
            title: {
                left: 'center',
                text: '分类访问量',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                },
    
            },
            legend: {
                data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
                top: 30
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            
            series: [
                {
                    
                    data: [
                        {
                            
                            value: 200,
                            itemStyle: {
                                color: '#5885e8'
                            }
                        },
                        {
                            value: 200,
                            itemStyle: {
                                color: '#13cfd5'
                            }
                        },
                        {
                            value: 200,
                            itemStyle: {
                                color: '#00ce68'
                            }
                        },
                        {
                            value: 200,
                            itemStyle: {
                                color: '#ff9565'
                            }
                        },
                        {
                            value: 200,
                            itemStyle: {
                                color: '#20ff19'
                            }
                        },
                        {
                            value: 200,
                            itemStyle: {
                                color: 'aqua'
                            }
                        },
                        {
                            value: 200,
                            itemStyle: {
                                color: 'skyblue'
                            }
                        },
    
                    ],
                    type: 'bar'
                }
    
            ]
        };
        // 3.0 根据参数生成ehcars图
    //  */
    myChart2.setOption(options)
    }

    

})